<template>
  <el-dialog title="关联角色" :visible.sync="visible" width="1000px"
             append-to-body :close-on-click-modal="false">

    <el-row :gutter="12">
      <el-col :span="12">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <el-table ref="RoleTableRef"
                    :border="Global.tableShowBorder"
                    v-loading="loading"
                    :data="roleList"
                    row-key="roleId"
                    highlight-current-row
                    @current-change="handleCurrentChange">
            <el-table-column label="角色编号" prop="roleId" width="120"/>
            <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true"/>
            <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true"/>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                      @pagination="getRoleList"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>目录列表</span>
          </div>
          <el-tree
            ref="DirTreeRef"
            default-expand-all
            :props="props"
            :data="amDirectoryList"
            node-key="id"
            show-checkbox
            check-strictly
            @check-change="handleCheckChange">
          </el-tree>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">保存关联关系</el-button>
      <el-button @click="cancel">关闭窗口</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus} from "@/api/system/role";
import {
  getDirIdsByRoleId,
  getRoleIdsByDirId,
  listDirectory,
  saveDirectoryRole,
  saveRoleDirectory
} from "../../../api/am/directory";

export default {
  name: 'ModalLinkRoleDir',
  data() {
    return {
      visible: false,
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      amDirectoryList: [],
      // 日期范围
      dateRange: [],
      // 数据范围选项
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      selectedRoleIds: [],
      multipleSelection: [],

      currentRole: {
        id: -1,
      },

      props: {
        label: 'directory',
        children: 'children'
      },
    }
  },
  methods: {
    open() {
      this.visible = true;
      this.getRoleList();
      this.getDirList();
    },
    /** 查询文件夹列表 */
    getDirList() {
      this.loading = true;
      listDirectory({
        pageNum: 1,
        pageSize: 999,
        directory: null,
        parentId: null,
        sort: null,
        isDel: null
      }).then(response => {
        this.amDirectoryList = this.handleTree(response.rows, "id", "parentId");
        this.loading = false;
      });
    },
    getDirLinkedRoleIds() {
      getRoleIdsByDirId(this.directory.id).then(response => {
        this.selectedRoleIds = [...response.data]
        this.getList()
      });
    },
    /** 查询角色列表 */
    getRoleList() {
      this.loading = true;
      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.roleList = response.rows;
          this.total = response.total;
          this.loading = false;
          this.$nextTick(() => {
            this.roleList.forEach(role => {
              if (this.selectedRoleIds.includes(role.roleId)) {
                this.$refs.RoleTableRef.toggleRowSelection(role)
              }
            })
          })
        }
      );
    },
    handleCurrentChange(role) {
      this.currentRole = role;
      getDirIdsByRoleId(this.currentRole.roleId)
        .then(response => {
          this.$refs.DirTreeRef.setCheckedKeys(response.data);
        })
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      // this.multipleSelection = val;
    },
    submit() {
      const selectedNodes = this.$refs.DirTreeRef.getCheckedNodes(false, true)
      console.log(selectedNodes);
      saveRoleDirectory({
        roleId: this.currentRole.roleId,
        directoryIds: selectedNodes.map(item => item.id)
      }).then(response => {
        console.log(response);
        this.$modal.msgSuccess("关联关系保存成功");
      })
      // saveDirectoryRole({
      //   roleIds: this.multipleSelection.map(role => role.roleId),
      //   directoryId: this.directory.id,
      // }).then(response => {
      //   console.log(response);
      //   this.$modal.msgSuccess("关联角色成功");
      // })
    },
    cancel() {
      this.visible = false;
    },
    handleCheckChange(e, isChecked) {
      if(isChecked && e.parentId !== 0) {
        this.$refs.DirTreeRef.setChecked(e.parentId, true, false);
      }
    }
  }
}
</script>

<style lang="less"></style>
